<!DOCTYPE HTML>
<html>
<head>
 <meta http-equiv="content-type" content="text/html" />
 <meta name="author" content="VicAMMON" />
     <title>Неназванный 1</title>
</head>

<body>
<div class="some-area" style="background-color: grey; width: 100%;"></div>
    <div class="some-area" style="float:left; background-color: red;">
    <div class="portlet-wrapper">
        <div class="portlet-header"></div>
        <div class="portlet-body">
            <div>
                <ul>
                    <li>aaaaaaaaaaaaa</li>
                    <li>bbbbbbbbbbbbb</li>
                    <li>ccccccccccccc</li>
                </ul>
            </div>
        </div>
        <div class="portlet-footer"></div>
    </div>
    <div class="portlet-wrapper">
        <div class="portlet-header"></div>
        <div class="portlet-body">
            <div>
                <ul>
                    <li>eeeeeeeeeeeee</li>
                    <li>fffffffffffff</li>
                    <li>ggggggggggggg</li>
                </ul>
            </div>
        </div>
        <div class="portlet-footer"></div>
    </div>
</div>
<div class="some-area" style="width: 600px; background-color: green; float:left;"></div>
<div class="some-area" style="width: 250px; background-color: black; float:left;">
    <div class="portlet-wrapper">
        <div class="portlet-header"></div>
        <div class="portlet-body">
            <div>
                <ul>
                    <li>eeeeeeeeeeeee</li>
                    <li>fffffffffffff</li>
                    <li>ggggggggggggg</li>
                </ul>
            </div>
        </div>
        <div class="portlet-footer"></div>
    </div>
    <div class="portlet-wrapper">
        <div class="portlet-header"></div>
        <div class="portlet-body">
            <div>
                <ul>
                    <li>eeeeeeeeeeeee</li>
                    <li>fffffffffffff</li>
                    <li>ggggggggggggg</li>
                </ul>
            </div>
        </div>
        <div class="portlet-footer"></div>
    </div>
</div>
<div class="clearfix"></div>
<div class="some-area" style="background-color: grey; width: 100%;"></div>
<style>
.clearfix{
    width: 1px;
    height: 1px;
    content: ".";
    clear: both;
    visibility: hidden;
}
    .some-area{
        width: 300px;
        min-height: 200px;
        margin: 5px;
    }
    .portlet-wrapper{
        /*width: 300px;*/
    }
    .portlet-header{
        height: 30px;
        border-radius:12px 12px 0 0;
        background-color: silver;
        border: 1px solid grey;
        -moz-box-shadow: 0 0 13px white inset;
        -webkit-box-shadow: 0 0 13px white inset;
        box-shadow: 0 0 13px white inset;
    }
    .portlet-body{
        border: 1px solid grey;
        background-color: #f6f6f6;
        border-top:0;
        border-bottom:0;
        padding: 10px;
    }
    .portlet-footer{
        height: 10px;
        border-radius:0 0 5px 5px;
        background-color: silver;
        border: 1px solid grey;
        -moz-box-shadow: 0 0 7px white inset;
        -webkit-box-shadow: 0 0 7px white inset;
        box-shadow: 0 0 7px white inset;
    }
    .portlet-header:after{
        
    }
</style>
</body>
</html>